<template>
  <div :class="slider ? 'offcanvas-container' : '' " @click.self="closeOff">
    <div class="offcanvas-menu" :class="slider ? 'active': ''" id="offcanvas-menu">
      <!-- 头像区域 -->
      <div class="profile-card text-center">
        <div class="avatar">
          <div class="profile-card__image space-mb--10">
            <van-image
              class="image-fluid"
              round
              width="56"
              height="56"
              fit="fill"
              :src="userinfo.avatar ? userinfo.avatar : require('@/assets/missing-face.png')"
              :error-icon="require('@/assets/missing-face.png')"
            />
          </div>
          <div v-if="token" class="profile-card__content">
            <div class="name">{{userinfo.username ? userinfo.username:""}}</div>
          </div>
          <div v-else @click="goLogin" class="profile-card__content">
            <div class="name">立即登陆</div>
          </div>
        </div>
      </div>
      <!-- 列表区域 -->
      <div class="offcanvas-navigation-wrapper space-mt--40">
        <div class="offcanvas-navigation">
          <div>
            <van-icon name="comment-circle-o" class="space-mr--40" />
            <router-link :to="{name: 'Notice'}">消息</router-link>
          </div>
          <div>
            <van-icon name="shop-collect-o" class="space-mr--40" />
            <router-link :to="{
              name: 'User-signin',
              params: {
                type: 'collections'
              }
            }">收藏</router-link>
          </div>
          <div>
            <van-icon name="upgrade" class="space-mr--40" />
            <router-link :to="{
              name: 'User-order',
              params: {
                type: 'all'
              }
            }">订单</router-link>
          </div>
          <div>
            <van-icon name="edit" class="space-mr--40" />
            <a href="javascript:void(0)" @click="toModifyPwd">修改密码</a>
          </div>
          <div>
            <van-icon name="setting-o" class="space-mr--40" />
            <router-link :to="{name: 'User-menu'}">设置</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState,
  mapMutations,
  mapActions
} from 'vuex';
import Vue from 'vue';
import { Icon, Image as VanImage, Toast } from 'vant';
Vue.use(Icon).use(VanImage).use(Toast);

export default {
  // 得到overlay的控制状态
  computed: {
    ...mapState('overlayModule', ['slider']),
    ...mapState('userModule', ['token', 'userinfo'])
  },
  methods: {
    ...mapMutations('overlayModule', ['CHANGESLIDER']),
    ...mapActions('userModule', ['GETUSERINFO']),
    closeOff() {
      if (this.slider) {
        // 开启的时候点击遮罩层就会触发关闭	
        this.CHANGESLIDER()
      }
    },
    goLogin() {
      this.$router.push({ name: 'User-type', params: { type: 'login' } })
    },
    toModifyPwd() {
      if (!this.token) {
        Toast({
          message: "您好，先去登录吧！",
          closeOnClick: true,
          forbidClick: true,
          duration: 500
        });
        return
      } else {
        this.$router.push({
          name: 'User-modify-pwd'
        })
      }
    }
  },
  mounted() {
    if (this.token && !this.userinfo.userid) {
      this.GETUSERINFO()
    }
  }
}
</script>

<style lang="css">
.space-mb--10 {
  margin-bottom: 10px;
}
.space-mt--40 {
  margin-top: 40px;
}
.space-mr--40 {
  margin-right: 15px;
}

/* 遮罩层 */
.offcanvas-container {
  width: 100%;
  height: 100vh;
  /* background-color: #0056B3; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

/* 菜单 */
.offcanvas-menu {
  color: #06142d;
  position: fixed;
  z-index: 9999;
  top: 100px;
  right: 0;
  width: 140px;
  height: 60vh;
  max-width: 100%;
  margin-left: auto;
  padding: 30px 20px;
  transition: all 0.6s;
  transform: translateX(100%);
  background-color: #f1f1f1;
  background-image: linear-gradient(to bottom, #f1f1f1 0%, #f2f8ff 100%);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.16);
}

.offcanvas-menu.active {
  transform: translateX(0);
}

/* 头像 */
.profile-card__image .image-fluid {
  border-radius: 50%;
  vertical-align: middle;
  border-style: none;
  max-width: 50%;
  height: auto;
  margin: auto;
}

.profile-card__content div {
  font-weight: 400;
  font-size: 16px;
}

/* 列表 */
.offcanvas-navigation {
  overflow-y: scroll;
  margin: 0 -40px;
  padding: 0 40px;
  font-size: 14px;
}

/* border */
.offcanvas-navigation div:nth-child(1) {
  border-top: 2px solid #ffffff;
}

.offcanvas-navigation div {
  display: flex;
  align-items: center;
  padding: 12px 10px 12px 30px;
  border-bottom: 2px solid #ffffff;
}
</style>
